<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>就业基地管理</title>
<link href="${request.contextPath}/static/css/layout.css" rel="stylesheet" type="text/css" />
<link href="${request.contextPath}/static/css/cb.css" rel="stylesheet" type="text/css" />
<link href="${request.contextPath}/static/css/n.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/demo/demo.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/js/laypage/skin/laypage.css" />
<script type="text/javascript" src="${request.contextPath}/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/js/work-mange.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/laydate/laydate.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/js/laypage/laypage.js"></script>
<script src="${request.contextPath}/static/js/vue/vue.min.js" charset="utf-8"></script>

</head>
<body >
	<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td width="1%" align="left" background="${request.contextPath}/static/images/b2.jpg"><img src="${request.contextPath}/static/images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="${request.contextPath}/static/images/b2.jpg">
				<table width="124" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="${request.contextPath}/static/images/tz.gif" width="10" height="16" /></td>
						<td width="104" align="left" class="biao">查找就业基地</td>
					</tr>
				</table>
			</td>
			<td width="31%" align="right" background="${request.contextPath}/static/images/b2.jpg"><img src="${request.contextPath}/static/images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#AEDEF4">
		<tr>
			<td align="center" bgcolor="#E2F7FE">
				<table width="80%" border="0" cellspacing="1" cellpadding="3">
					<tr>
						<td width="20%" align="right"><strong>矫正单位：</strong></td>
						<td width="12%" align="left" >
							<input id="jdName" data-options="prompt:'请选择矫正单位'"/>
						</td>
						<td width="10%" align="right"><strong>就业基地:</strong></td>
						<td width="13%" align="left"><input id="name" size="25" class="easyui-textbox" data-options="prompt:'请输入就业基地名称'"/></td>
						<td width="5%" align="left"><input type="button" value=" 查找 " onclick="app.getJobList()" /></td>
						<td width="35%" colspan="2" align="right">
							<input type="button" onclick="addEvent()" value="增加记录" /> <input type="button" value="导出Excle" onclick="exportEvent()" />
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

	<table width="50%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="5"></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" >
		<tr>
			<td width="1%" align="left" background="${request.contextPath}/static/images/b2.jpg"><img src="${request.contextPath}/static/images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="${request.contextPath}/static/images/b2.jpg">
				<table width="124" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="${request.contextPath}/static/images/tz.gif"
							width="10" height="16" /></td>
						<td width="104" align="left" class="biao">就业基地列表</td>
					</tr>
				</table>
			</td>
			<td width="31%" align="right" background="${request.contextPath}/static/images/b2.jpg"><img src="${request.contextPath}/static/images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#AEDEF4" style="border: 1px solid #AEDEF4" id="app">
		<tr>
			<td width="5%" height="25" align="center" bgcolor="#EFFBFE">序号</td>
			<td align="center" bgcolor="#EFFBFE">所属单位</td>
			<td align="center" bgcolor="#EFFBFE">基地名称</td>
			<td align="center" bgcolor="#EFFBFE">地理位置</td>
			<td align="center" bgcolor="#EFFBFE">负责人</td>
			<td align="center" bgcolor="#EFFBFE">联系电话</td>
			<td align="center" bgcolor="#EFFBFE">管理操作</td>
		</tr>
		<tr v-for="(item,index) in jobList" onmouseout="this.style.backgroundColor='#ffffff'" bgcolor="#ffffff" onmouseover="this.style.backgroundColor='#E6F2FF'">
			<td height="25" align="center"><span v-text="startIndex+index"></td>
			<td align="center"><strong v-text="item.jdName"/></td>
			<td align="center" v-text="item.jName"></td>
			<td align="center" v-text="item.location"></td>
			<td align="center" v-text="item.principal"></td>
			<td align="center" v-text="item.phonenum"></td>
			<td align="center"><input type="button" @click="editEvent(item.id)" value="修改" /> <input type="button" @click="app.delJob(item.id)" value="删除" /></td>
		</tr>
		<tr>
			<td colspan="7" align="center">
				<div id="pagediv"></div>
			</td>
		</tr>
	</table>
<!-- 增加就业基地弹出框 -->
<div id="dlag" ></div>
<!-- 修改就业基地弹出框 -->
<div id="dlag2"></div>
</body>
<script type="text/javascript">

	$('#jdName').combobox({    
	    url:'${request.contextPath}/judicialDeptment/queryAll',    
	    valueField:'id',    
	    textField:'name',
	    loadFilter:function(res){
	    	var value=res.data;
	    	return value;
	    }
	});


	var app = new Vue({
		el : '#app',
		data : {
			jobList: [],
			startIndex : 1,
			currPage:1,
			pageSize:5
		},
		mounted : function() {
			this.$nextTick(function() {
				this.getJobList();
			});
		},
		methods : {
			//得到就业基地列表
			getJobList:function(curr){
				$.ajax({
		            url:'querylike',
		            data:{
		            	jid:$("#jdName").val(),			            	
		                name:$("#name").val(),
		                pageNum:curr || 1,
		                pageSize:app.pageSize
		            },
		            type:'get',
		            dataType:'json',
		            success:function(res){
		                app.jobList=res.data[0].result;
		                app.startIndex=(res.data[0].curPageNum-1)*res.data[0].pageSize+1;
		                laypage({
		                    cont : 'pagediv', //容器。值支持id名、原生dom对象，jquery对象,
		                    pages : res.data[0].totalPage, //总页数
		                    first : "首页",
		                    last : "尾页",
		                    skip : true, //是否开启跳页
		                    skin : '#5675A2',
		                    curr : curr || 1, //当前页
		                    jump : function(obj, first) { //触发分页后的回调
		                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
		                        	app.currPage=obj.curr;
		                        	app.getJobList(obj.curr);
		                        }
		                    }
		                });
		           	}
		     	});	 
			},
			addJob:function(){
				 $.ajax({
		            url:'add',
		            data:$('#form1').serialize(),
		            type:'post',
		            dataType:'json',
		            success:function(res){
		                if(res.code==0){
		                    app.getJobList(app.currPage);
		                }
		                app.showMsg(res.message);
		            }
		        });
			},
			delJob:function(id){
				$.messager.confirm('提示框', '你确定要删除吗?',function(i){
		            if(i){
		            //确认删除
		                $.ajax({
		                    url:'del',
		                    data:{
		                        id:id
		                    },
		                    type:'get',
		                    dataType:'json',
		                    success:function(res){
		                        if(res.code==0){
		                        	if(app.jobList.length==1){
		                        		app.currPage--;
		                        	}
		                        	app.getJobList(app.currPage);
		                        }
		                        app.showMsg(res.message);
		                    }
		                });
		            }else{
		            //取消删除
		            }
		        })
			},
			updateJob:function(id){
				$.ajax({
		            url:'update',
		            data:$('#form2').serialize(),
		            type:'get',
		            dataType:'json',
		            success:function(res){
		                if(res.code==0){
		                    app.getJobList(app.currPage);
		                }
		                app.showMsg(res.message);
		            }
		        });
			},
			showMsg: function(msg){
		    	$.messager.show({
		    		title:'提示',
		    		msg:msg,
		    		timeout:5000,
		    		showType:'slide',
		    	});
		    }
		}

	});
	

	 //监听添加事件
   var addEvent=function(){
	   	$('#dlag').dialog({    
	   	    title: '增加就业基地',    
	   	    width: '600px',    
	   	    height: '400px',
	   	    closed: false,
	   	    region:'center',
	   	    cache: false,    
	   	    href: 'page?page=work-manage/job_add',    
	   	    modal: true,
	   	    iconCls: 'icon-save',
			buttons: [{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					if($("#form1").form('validate')){
						app.addJob();
						$('#dlag').dialog('close');				
					}
				}
			},{
				text:'取消',
				handler:function(){
					$('#dlag').dialog('close');
				}
			}]
	   	});
   }
   
  
   //修改事件
   var editEvent= function(id) {
   	$('#dlag2').dialog({    
	   	    title: '修改就业基地',    
	   	    width: '600px',    
	   	    height: '400px',
	   	    closed: false,
	   	    region:'center',
	   	    cache: false,    
	   	    href: 'get?id='+id,    
	   	    modal: true,
	   	    iconCls: 'icon-save',
			buttons: [{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					if($("#form2").form('validate')){
						app.updateJob();
						$('#dlag2').dialog('close');				
					}
				}
			},{
				text:'取消',
				handler:function(){
					$('#dlag2').dialog('close');
				}
			}]
	   	});
   }
 	
	//导出事件
  	var exportEvent=function(){
		var url="export?name="+$("#name").val()+"&jid="+$("#jdName").val();
  		window.open(url);
  	}
</script>
</html>